import React, { Component } from 'react';
import "./index.css"
import Star from "../Star"
class experience extends Component{

    constructor(){
            super()
            this.state = {
                // 第一块的json数据
                arr:[
                    {img:"https://a0.muscache.com/4ea/air/v2/pictures/8ab4cf60-c642-48c6-9c60-75d0570e367e.jpg?t=r:w1200-h720-sfit,e:fjpg-c90",
                    a1:"PLUS",a2:"已验证 · 洛杉矶",b1:"Live the LA  life style in Loft near Metro",b2:"https://a0.muscache.com/im/pictures/f5dd6614-31e7-447f-99db-da44ad2875a8.jpg?aki_policy=profile_small",
                    c1:"160",c2:"每晚",d1:"202"},
                    {img:"https://a0.muscache.com/4ea/air/v2/pictures/997b02ab-9522-4500-a0de-6e67a94bbe9b.jpg?t=r:w1200-h720-sfit,e:fjpg-c90",
                    a1:"PLUS",a2:"已验证 · 上海",b1:"拥天井花园、私人影院的石库门阁楼式套房",b2:"https://a0.muscache.com/im/pictures/f544763b-6632-4dcb-b47e-61f534eb977b.jpg?aki_policy=profile_small",
                    c1:"132",c2:"每晚",d1:"176"},
                    {img:"https://a0.muscache.com/4ea/air/v2/pictures/7efe0c59-524a-4c31-8af4-4e6c80eebfb6.jpg?t=r:w1200-h720-sfit,e:fjpg-c90",
                    a1:"PLUS",a2:"已验证 · 开普敦",b1:"Unwind in a Bright,Airy Space witch Rustic Accents",b2:"https://a0.muscache.com/im/users/13286229/profile_pic/1416730155/original.jpg?aki_policy=profile_small",
                    c1:"53",c2:"每晚",d1:"267"},
                    {img:"https://a0.muscache.com/4ea/air/v2/pictures/b0cfff63-c7c7-4541-a1c5-23b323595aa6.jpg?t=r:w1200-h720-sfit,e:fjpg-c90",
                    a1:"PLUS",a2:"已验证 · 上海",b1:"有投影仪的建筑师自宅两户式公寓型住宅",b2:"https://a0.muscache.com/im/pictures/5ccd7883-d4ab-4420-8e32-a5c6af9358f9.jpg?aki_policy=profile_small",
                    c1:"83",c2:"每晚",d1:"105"},
                    {img:"https://a0.muscache.com/4ea/air/v2/pictures/e5ebb3b6-75a3-4df7-b044-640c4a398d76.jpg?t=r:w1200-h720-sfit,e:fjpg-c90",
                    a1:"PLUS",a2:"已验证 · 墨尔本",b1:"Forest-and-Heaven Themed Apartment Close to the Heart",b2:"https://a0.muscache.com/im/pictures/e5b0668f-0d5e-4dd0-ab46-3054122c7781.jpg?aki_policy=profile_small",
                    c1:"229",c2:"每晚",d1:"180"},
                    {img:"https://a0.muscache.com/4ea/air/v2/pictures/1c77568c-ea1e-46a1-b285-749c2196746c.jpg?t=r:w1200-h720-sfit,e:fjpg-c90",
                    a1:"PLUS",a2:"已验证 · 开普敦",b1:"Sunny Central Apartment with Style",b2:"https://a0.muscache.com/im/pictures/user/54f5a40d-2b04-4f1e-b692-b3cc97215458.jpg?aki_policy=profile_small",
                    c1:"52",c2:"每晚",d1:"67"},
                    {img:"https://a0.muscache.com/4ea/air/v2/pictures/22351271-df11-4843-80a0-9b15e5827a81.jpg?t=r:w1200-h720-sfit,e:fjpg-c90",
                    a1:"PLUS",a2:"已验证 · 上海",b1:"[太极]近淮路老上海石库门洋房",b2:"https://a0.muscache.com/im/pictures/f4411468-ce3f-4a25-ad96-d34b37cfede8.jpg?aki_policy=profile_small",
                    c1:"138",c2:"每晚",d1:"156"},
                    {img:"https://a0.muscache.com/4ea/air/v2/pictures/15988b08-b363-40b9-960b-402d795e7ddb.jpg?t=r:w1200-h720-sfit,e:fjpg-c90",
                    a1:"PLUS",a2:"已验证 · 上海",b1:"Stylish Room in Central Apartment",b2:"https://a0.muscache.com/im/pictures/be162a6e-27a0-4150-818a-257625f77566.jpg?aki_policy=profile_small",
                    c1:"83",c2:"每晚",d1:"147"}
                ],
                arrs:[
                    {img:"https://a0.muscache.com/im/pictures/22032704/c7b4c7d8_original.jpg?aki_policy=large",
                    a2:"城堡·二十九粽搁村(TWENTYNINE PALMS)",b1:"Tile House",b2:"https://a0.muscache.com/im/users/6119496/profile_pic/1367094322/original.jpg?aki_policy=profile_small",
                    c1:"312",c2:"每晚·免费取消",d1:"297"},
                    {img:"https://a0.muscache.com/im/pictures/45655208/1ae646f5_original.jpg?aki_policy=large",
                    a2:"整栋木屋·约书亚树",b1:"Jsshua Tree Homesteader Cabin",b2:"https://a0.muscache.com/im/users/68214/profile_pic/1334796404/original.jpg?aki_policy=profile_small",
                    c1:"160",c2:"每晚·免费取消",d1:"667"},
                    {img:"https://a0.muscache.com/im/pictures/6451545/08a2d47b_original.jpg?aki_policy=large",
                    a2:"洞穴·干尼亚",b1:"Luxurious stone villa in Crete",b2:"https://a0.muscache.com/im/pictures/306454bb-91a3-42e2-afd2-9e005af7da8f.jpg?aki_policy=profile_small",
                    c1:"81",c2:"每晚·免费取消",d1:"113"},
                    {img:"https://a0.muscache.com/im/pictures/79931548/ff75f30f_original.jpg?aki_policy=large",
                    a2:"整栋别墅·承塔莱",b1:"Villa Amonteera,Luxury with Fantastic Ocean Views",b2:"https://a0.muscache.com/im/pictures/3dadc1b5-779e-4841-b72c-907eeca8510c.jpg?aki_policy=profile_small",
                    c1:"1,951",c2:"每晚·免费取消",d1:"62"}
                ],
                newarr:[
                    {img:"https://a0.muscache.com/im/pictures/6722906/b4bc6418_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"整套房子·穆赫雷斯岛(ISLA MUJERES)",b1:"The World Famous Seashell House~Case Caracol",b2:"https://a0.muscache.com/im/pictures/user/c0dedd78-9dfa-49d1-b596-92cf993fa6dc.jpg?aki_policy=profile_small",
                    c1:"420",c2:"每晚·免费取消",d1:"172"},
                    {img:"https://a0.muscache.com/im/pictures/1faf9a4c-f839-44da-bd37-65ddc928379e.jpg?aki_policy=large",
                    a1:"PLUS",a2:"整栋别墅·新加拉惹",b1:"180°VIEW,PRIVATE POOL VILLA..",b2:"https://a0.muscache.com/im/pictures/8236deb6-abd2-4dae-9eab-c7fd53e4f5c9.jpg?aki_policy=profile_small",
                    c1:"237",c2:"每晚·免费取消",d1:"140"},
                    {img:"https://a0.muscache.com/im/pictures/1768655/4d73993d_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"圆顶屋·奥斯图尼",b1:"Trullo aromatic",b2:"https://a0.muscache.com/im/users/247627/profile_pic/1293279456/original.jpg?aki_policy=profile_small",
                    c1:"147",c2:"每晚·免费取消",d1:"54"},
                    {img:"https://a0.muscache.com/im/pictures/9158991/d0fa6362_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"独立房间·旧金山",b1:"Perfectly located Castro",b2:"https://a0.muscache.com/im/users/18431/profile_pic/1310056211/original.jpg?aki_policy=profile_small",
                    c1:"111",c2:"每晚·免费取消",d1:"363"},
                    {img:"https://a0.muscache.com/im/pictures/19755676/c2d3162d_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"整套公寓·波尔图",b1:"PORTA33 PENTHOUSE DOWNTOWN SPOT",b2:"https://a0.muscache.com/im/users/802361/profile_pic/1349136107/original.jpg?aki_policy=profile_small",
                    c1:"173",c2:"每晚·免费取消",d1:"448"},
                    {img:"https://a0.muscache.com/im/pictures/27140516/751a4207_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"整栋乡村小屋·玛卡瓦",b1:"Adorable Garden Gingerbread House",b2:"https://a0.muscache.com/im/users/3280543/profile_pic/1378257191/original.jpg?aki_policy=profile_small",
                    c1:"246",c2:"每晚·免费取消",d1:"224"},
                    {img:"https://a0.muscache.com/im/pictures/85695860/6bc94bff_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"整栋木屋·海峡",b1:"JIDEOUT BALL - Eco Bamoo Home",b2:"https://a0.muscache.com/im/pictures/b8083cfc-f0b8-430a-9ab8-ce9b7584c09c.jpg?aki_policy=profile_small",
                    c1:"246",c2:"每晚·免费取消",d1:"275"},
                    {img:"https://a0.muscache.com/im/pictures/22241744/cf0ae91b_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"整间阁楼·克拉科夫",b1:"Amazing and Extrmely Central Flat",b2:"https://a0.muscache.com/im/users/4204066/profile_pic/1359974305/original.jpg?aki_policy=profile_small",
                    c1:"79",c2:"每晚·免费取消",d1:"477"},
                    {img:"https://a0.muscache.com/im/pictures/11424118/e1fb3923_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"整套公寓·马拉喀什",b1:"YOUR PRIVATE 3 BEDR. ROAD,AN EXCLUSIVE RENTAL!",b2:"https://a0.muscache.com/im/users/2439680/profile_pic/1409991948/original.jpg?aki_policy=profile_small",
                    c1:"124",c2:"每晚·免费取消",d1:"197"},
                    {img:"https://a0.muscache.com/im/pictures/4084180/e5bc5484_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"独立房间·瓦尔帕莱索",b1:"Romantic Suite in family home in Valparaiso,Chile",b2:"https://a0.muscache.com/im/users/1799477/profile_pic/1331151643/original.jpg?aki_policy=profile_small",
                    c1:"84",c2:"每晚·免费取消",d1:"244"},
                    {img:"https://a0.muscache.com/im/pictures/25625163/d4833a1c_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"整套公寓·AKUREYRI",b1:"Amazing view - Moderne apartment",b2:"https://a0.muscache.com/im/pictures/7043e35d-08bf-4f64-b2dd-b9d821b40461.jpg?aki_policy=profile_small",
                    c1:"324",c2:"每晚·免费取消",d1:"280"},
                    {img:"https://a0.muscache.com/im/pictures/6174600/15fb85b3_original.jpg?aki_policy=large",
                    a1:"PLUS",a2:"希腊风基克拉迪住房·伊亚",b1:"Unique Architecture Cave House",b2:"https://a0.muscache.com/im/pictures/32e97880-2cfb-430c-9ec0-faeb28be8612.jpg?aki_policy=profile_small",
                    c1:"656",c2:"每晚·免费取消",d1:"133"}
                ]
           }
        }

    render(){
        return (
            <div className="experience">
                <div className="header"></div>
                <div className="main">
                    {/* 第一块 */}
                    <div className="one">
                        <h2>为您推出爱彼迎plus</h2>
                        <p>品质和舒适性经过验证的经典房源</p>
                        {/* 循环渲染数据 */}
                        <div className="onebox">
                            {
                                this.state.arr.map((item,index)=>{
                                    return(
                                        <div className="oneboxs" key={index}>
                                            <div className="imgs">
                                                <img src={item.img} alt=""/>
                                            </div>
                                            <div className="tit"><span className="spana">{item.a1}</span><span className="spanb">{item.a2}</span></div>
                                            <div className="info">
                                                <div className="info-zi">{item.b1}</div>
                                                <div className="info-img">
                                                    <img src={item.b2} alt=""/>
                                                </div>
                                            </div>
                                            <div className="price"><span>${item.c1} SGD起</span><span>{item.c2}</span></div>
                                            <div className="star"><span><Star /></span><span>{item.d1}</span></div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="bot">显示全部（1000+）></div>
                        <h2 className="tits">浏览全部300+房源</h2>
                        <div className="onebox">
                            {
                                this.state.arrs.map((item,index)=>{
                                    return(
                                        <div className="oneboxs" key={index}>
                                            <div className="imgs">
                                                <img src={item.img} alt=""/>
                                            </div>
                                            <div className="tit"><span className="spanb spanc">{item.a2}</span></div>
                                            <div className="info">
                                                <div className="info-zi">{item.b1}</div>
                                                <div className="info-img">
                                                    <img src={item.b2} alt=""/>
                                                </div>
                                            </div>
                                            <div className="price"><span>${item.c1} SGD起</span><span>{item.c2}</span></div>
                                            <div className="star"><span>{item.d1}</span></div>
                                        </div>
                                    )
                                })
                            }
                        </div>

                        <hr className="hr"/>

                        <h2>旅行主题系列房源</h2>
                        <p>按照不同需求，挑选全球高分房源</p>
                        <div className="two">
                            <div className="twos">
                                <div className="imgs">
                                    <img src="https://a0.muscache.com/pictures/ec19ee71-8010-420a-8a78-547a70ab4f9b.jpg" alt=""/>
                                </div>
                                <div className="num nums">2000多个房源</div>
                                <div className="info">适合家庭出游的理想房源，自由畅享私家空间</div>
                            </div>
                            <div className="twos">
                                <div className="imgs">
                                    <img src="https://a0.muscache.com/pictures/dc45c31a-d611-4a7a-aebe-a8d0ad749fd0.jpg" alt=""/>
                                </div>
                                <div className="num">2000多个房源</div>
                                <div className="info">预定政策灵活的高分房源，满足差旅所需</div>
                            </div>
                        </div>

                        <hr className="hr"/>

                            <div className="onebox">
                            {
                                this.state.newarr.map((item,index)=>{
                                    return(
                                        <div className="oneboxs" key={index}>
                                            <div className="imgs">
                                                <img src={item.img} alt=""/>
                                            </div>
                                            <div className="tit"><span className="spanb spanc">{item.a2}</span></div>
                                            <div className="info">
                                                <div className="info-zi">{item.b1}</div>
                                                <div className="info-img">
                                                    <img src={item.b2} alt=""/>
                                                </div>
                                            </div>
                                            <div className="price"><span>${item.c1} SGD起</span><span>{item.c2}</span></div>
                                            <div className="star"><span>{item.d1}</span></div>
                                        </div>
                                    )
                                })
                            }
                        </div>

                        <div className="pages">
                            <div className="page">
                                <ul>
                                    <li><a className="active" href="">1</a></li>
                                    <li><a href="">2</a></li>
                                    <li><a href="">3</a></li>
                                    <li><a href="" className="dian">···</a></li>
                                    <li><a href="">17</a></li>
                                    <li><a className="btn" href="">></a></li>
                                </ul>
                            </div>
                            <div className="desc">1-18共超过300个房源出租</div>
                        </div>
                        <div className="bottom">
                            <p>输入日期以查看总价格，包含额外附加费用及适用税费</p>
                            <p>只有预定后的48小时之内可以免费取消</p>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default experience;